<!--
 * @Author: anonymous
 * @Date: 2022-04-16 19:16:20
 * @LastEditors: anonymous
 * @LastEditTime: 2022-04-20 19:15:22
 * @FilePath: /vue3-teap/src/components/NavMenu.vue
 * @Description:
-->
<template>
  <!-- 使用div作为单一根元素包裹所有菜单项 -->
  <div class="nav-menu-wrapper">
    <!-- 循环主页面的菜单信息 -->
    <template v-for="(item, index) in navMenu">
      <!-- 一级菜单：当前菜单存在子菜单，一级菜单下存在二级菜单 -->
      <el-sub-menu :index="item.path" v-if="item.children && item.children.length" :key="`sub-${index}`">
        <template #title>
          <i :class="item.meta.icon" class="menu-icon" aria-hidden="true"></i>
          <span>{{item.meta.title}}</span>
        </template>
        <nav-menu :navMenu="item.children"></nav-menu>
      </el-sub-menu>

      <!-- 一级菜单：当前菜单不存在子菜单，仅是一个一级菜单无二级菜单 -->
      <el-menu-item :index="item.path" :data-path="item.path" v-else :key="`item-${index}`">
        <i :class="item.meta.icon" class="menu-icon" aria-hidden="true"></i>
        <template #title><span>{{item.meta.title}}</span></template>
      </el-menu-item>
    </template>
  </div>
</template>

<script lang='ts'>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'NavMenu',
  props: ['navMenu']
})
</script>

<style lang="scss" scoped>
.nav-menu-wrapper {
  width: 100%;
}

.menu-icon {
  margin-right: 5px;
  width: 24px;
  text-align: center;
  font-size: 16px;
  color: #8aa4be; /* 图标颜色 */
  transition: color 0.3s;
}

:deep(.el-sub-menu__title) {
  &:hover {
    .menu-icon {
      color: #a6c0e0;
    }
  }
}

:deep(.el-menu-item) {
  &:hover {
    .menu-icon {
      color: #a6c0e0;
    }
  }
  
  &.is-active {
    .menu-icon {
      color: #ffffff; /* 选中菜单项的图标颜色 */
    }
  }
}

:deep(.el-menu--inline) {
  background-color: #263849 !important; /* 二级菜单背景颜色稍暗 */
  
  .el-menu-item {
    padding-left: 40px !important;
    background-color: #263849 !important;
    
    &:hover {
      background-color: #34495e !important;
    }
    
    &.is-active {
      background-color: #1e88e5 !important;
    }
  }
}
</style>

